import { Table } from "antd";
import dayjs from "dayjs";
import { eq } from "lodash-es";
import { useState, useEffect, forwardRef, useImperativeHandle } from "react";

import { Scheduler } from "~/modules/worker/schedule";
import { useWorkSpace } from "~/modules/workspace/store/use-workspace";
import { getColumns, getParamsData } from "~/utils/chartParamsListPageination";
import eventBus from "~/utils/event";

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  time: string;
}
interface Props {}
const ParamsDataList = (props: Props, ref: any) => {
  const { workSpace } = useWorkSpace();
  const [paramsListColumns, setParamsListColumns] = useState([
    {
      title: "",
      dataIndex: "",
      key: "",
    },
  ]);
  const [paramsListData, setParamsListData] = useState<DataType[]>([]);
  const [chartsParamsData, setChartsParamsData] = useState({
    startTime: "",
    endTime: "",
    data: {},
  });

  eventBus.on(`dataList`, (value: any) => {
    chartsParamsData.data = Scheduler.datas;
    chartsParamsData.startTime = value.startTime;
    chartsParamsData.endTime = value.endTime;
    setChartsParamsData(chartsParamsData);
    const columns = getColumns(workSpace.splitCharts);
    const paramsData = getParamsData(chartsParamsData, workSpace.splitCharts);
    setParamsListColumns(columns);
    setParamsListData(paramsData);
  });

  useEffect(() => {
    chartsParamsData.data = Scheduler.datas;
    setChartsParamsData(chartsParamsData);
    const columns = getColumns(workSpace.splitCharts);
    const paramsData = getParamsData(chartsParamsData, workSpace.splitCharts);
    setParamsListColumns(columns);
    setParamsListData(paramsData);
    getTableData();
  }, []);

  useImperativeHandle(ref, () => ({
    getTableData,
  }));

  const getTableData = () => {
    chartsParamsData.data = Scheduler.datas;
    setChartsParamsData(chartsParamsData);
    const columns = getColumns(workSpace.splitCharts);
    const paramsData = getParamsData(chartsParamsData, workSpace.splitCharts);
    setParamsListColumns(columns);
    setParamsListData(paramsData);
  };

  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [currIndex, setCurrIndex] = useState(0);
  useEffect(() => {
    const page = Math.ceil(currIndex / pageSize);
    setCurrent(page === 0 ? 1 : page);
  }, [currIndex, pageSize]);

  eventBus.on(`pagination`, (value: any) => {
    setCurrIndex(value.currIndex);
  });

  const setCurrentRow: any = (record: any) => {
    try {
      // @ts-ignore
      if (
        eq(
          dayjs(record.time).format("YYYY-MM-DD HH:mm:ss"),
          dayjs(paramsListData[currIndex].time).format("YYYY-MM-DD HH:mm:ss")
        )
      ) {
        return "currentRow";
      } else {
        return "";
      }
    } catch (e) {}
  };
  return (
    <>
      <Table
        columns={paramsListColumns}
        pagination={{ current, pageSize }}
        onChange={(pagination) => {
          // @ts-ignore
          setCurrent(pagination.current);
          // @ts-ignore
          setPageSize(pagination.pageSize);
        }}
        dataSource={paramsListData}
        size="small"
        rowClassName={setCurrentRow}
      />
    </>
  );
};

export default forwardRef(ParamsDataList);
